<template>
  <div class="about">
    <el-container style="height: 100%">
      <el-header>
        <div class="title">汽车租赁后台管理</div>
        <div>
          <el-dropdown>
            <span class="el-dropdown-link">
              {{ userinfo.username
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="logout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container style="height: calc(100% - 60px)">
        <el-aside width="200px" style="height: 100%">
          <el-menu
            :default-active="sq"
            router
            style="height: 100%"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="/index">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item index="/yhgl">
              <i class="el-icon-menu"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="/ppgl">
              <i class="el-icon-menu"></i>
              <span slot="title">汽车品牌管理</span>
            </el-menu-item>
             <el-menu-item index="/qcgl">
              <i class="el-icon-menu"></i>
              <span slot="title">汽车管理</span>
            </el-menu-item>
                        <el-menu-item index="/ddgl">
              <i class="el-icon-menu"></i>
              <span slot="title">订单管理</span>
            </el-menu-item>
                                    <el-menu-item index="/gggl">
              <i class="el-icon-menu"></i>
              <span slot="title">公告管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userinfo: {},
      sq:""
    };
  },
  mounted() {
    this.getdata();
  },
  watch:{
    	$route: {
			async handler(to, from) {
				console.log(to);
				this.sq = to.path;

			
			},
			deep: true,
			immediate: true,
		},
  },
  methods: {
    handleOpen() {},
    handleClose() {},
    logout() {
      window.localStorage.clear();
      this.$router.push({
        path: "/",
      });
    },
    getdata() {
      this.userinfo = JSON.parse(window.localStorage.getItem("user"));
    },
  },
};
</script>
<style scoped>
.about {
  width: 100%;
  height: 100%;
}
</style>
<style>
.el-header {
  background: #483d8b;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>